<template>
  <div>
    <el-button class="w-100" :size="size" plain @click="toSelect">
      {{ buttonName }} <i class="el-icon-edit"></i>
    </el-button>
    <div v-if="selectList.length != 0">
      <el-table class="my-table m-t-10" :data="selectList" border :header-cell-style="{background:'#eee',color:'#000'}">
        <el-table-column type="index" align="center" label="序号" width="60"/>
        <el-table-column label="加注机编号">
          <template v-slot="scope">{{ scope.row.macCode | defaultValue }}</template>
        </el-table-column>
        <el-table-column label="加注站名称">
          <template v-slot="scope">{{ scope.row.siteName | defaultValue }}</template>
        </el-table-column>
        <el-table-column label="操作" width="60" align="center">
          <template v-slot="scope">
            <el-button type="text" icon="el-icon-delete" size="mini" @click="removeMachine(scope.$index)"/>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="buttonName" append-to-body :visible.sync="showFlag" width="1000px">
      <div class="flex-center">
        <div class="flex-start">
          <span class="m-r-10">地址</span>
          <app-address style="height: 32px;" @change="addressChange"/>
        </div>
        <div class="flex-start">
          <el-input size="small" class="m-r-10" placeholder="输入关键字"
                    style="width: 300px;" v-model="search.queryStr"/>
          <el-button size="small" icon="el-icon-search" type="primary" @click="query">查询</el-button>
        </div>
      </div>
      <el-table v-if="refreshFlag > 0" ref="fillingMachineSelectContentTableRef" class="my-table m-t-30 w-100"
                :data="data" v-loading="loading" height="350"
                border :header-cell-style="{background:'#eee',color:'#000'}">
        <el-table-column align="center" width="43">
          <template v-slot="scope">
            <el-checkbox v-if="canBeSelect(scope.row)" v-model="scope.row._selected"
                         @change="selectChange">{{ '' }}
            </el-checkbox>
            <i class="el-icon-warning c-gray" v-else title="已被其他集群选择或者没有安装到加注站"></i>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60"/>
        <el-table-column label="加注机编号" width="180">
          <template v-slot="scope">{{ scope.row.macCode | defaultValue }}</template>
        </el-table-column>
        <el-table-column label="加注站名称">
          <template v-slot="scope">{{ scope.row.siteName | defaultValue }}</template>
        </el-table-column>
        <el-table-column prop="ureaPrice" label="销售单价(元)" width="180"/>
      </el-table>
      <app-pagination ref="paginationRef" :total="total" :page-size="page.size"
                      class="m-t-20" @change="pageChange"/>
      <div class="dividing-line m-t-30"></div>
      <div class="m-t-30 flex-end">
        <el-button type="primary" plain @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {getPage} from "@/api/business/filling-machine";
import {
  equals,
  getRecords,
  getTotal,
  isListEmpty,
  isStringEmpty,
  isTrue,
  isNotNull,
  isNull,
  listRemove
} from "@/util/common-util";
import AppAddress from "@/components/business/app-address";

export default {
  name: "select-filling-machine-button",
  components: {AppAddress, AppPagination},
  props: {
    buttonName: {
      type: String,
      default: '选择加注机'
    },
    initSelectList: {
      type: Array,
      default: () => []
    },
    size: {
      type: String,
      default: 'small'
    },
    isCluster: {
      type: Boolean,
      default: false
    },
    curClusterId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showFlag: false,
      loading: false,
      data: [],
      search: {
        districtCode: null,
        cityCode: null,
        provinceCode: null,
        queryStr: null,
      },
      page: {
        size: 20,
        current: 1
      },
      total: 0,
      value: null,
      refreshFlag: 1,
      selectList: [],
      hasClusterId: false,
    }
  },
  created() {
    if (isStringEmpty(this.curClusterId)) {
      this.hasClusterId = false
    } else {
      this.hasClusterId = true
    }
    this.selectList = this.initSelectList
  },
  methods: {
    canBeSelect(_row) {
      if (isNull(_row.siteId)) return false
      if (isTrue(this.hasClusterId)) {
        if (equals(_row.clusterId, this.curClusterId)) return true
        if (isNotNull(_row.clusterId)) return false
      }
      return true
    },
    initByDefaultValue(_initValue) {
      if (isListEmpty(_initValue)) return
      this.selectList = _initValue
    },
    addressChange(region) {
      this.search.provinceCode = region.province
      this.search.cityCode = region.city
      this.search.districtCode = region.area
      this.query()
    },
    cancel() {
      this.showFlag = false
    },
    toSelect() {
      this.showFlag = true
      this.query()
    },
    query() {
      this.loading = true
      if (isTrue(this.isCluster)) {
        this.search.isClusterSelectFillMachine = true
      }
      getPage(this.page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.initSelected()
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
    initSelected() {
      for (const item of this.data) {
        item._selected = false
      }
      if (isListEmpty(this.initSelectList)) return
      for (const item of this.data) {
        for (const selectItem of this.initSelectList) {
          if (selectItem.id == item.id || selectItem.macCode == item.macCode) {
            item._selected = true
          }
        }
      }
    },
    selectChange() {
      this.refreshFlag = 0
      this.$nextTick(() => {
        this.refreshFlag = 1
      });
    },
    pageChange(_page) {
      this.page = _page
      this.query()
    },
    save() {
      this.selectList = []
      for (const item of this.data) {
        if (isTrue(item._selected)) {
          this.selectList.push({
            id: item.id,
            macCode: item.macCode,
            siteName: item.siteName
          })
        }
      }
      this.$emit('select', this.selectList)
      this.showFlag = false
    },
    removeMachine(_index) {
      listRemove(this.selectList, _index)
      this.$emit('select', this.selectList)
    }
  }
}
</script>
<style lang="scss" scoped>
.my-table {
  /deep/ .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  /deep/ td {
    padding: 8px 0 !important;
  }

  /deep/ th {
    padding: 8px 0 !important;
  }
}
</style>
